<script setup lang="ts">
import { provide, ref } from 'vue';
// 预览只读
const uApPreviewReadonly = ref(false);
const uApPreviewVisible = ref(true);
const uApUploadDisabled = ref(false);
const uApUploadVisible = ref(true);
const cmpDisabled = ref(false);
const cmpnoDownload = ref(false);
const cmpnoPreview = ref(false);
const previewEnableMulti=ref(true);
const uploadEnableMulti=ref(true);
const customInfo=ref('');

// 配置
const options = {
    maxUploads: 3,
    maxsize: 10240,
    allowedContentTypes: ['.jpg', '.pdf']
};
let uploadAndPreviewCols = [
    { field: 'name', width: 200, title: '文件名', checkbox: true },
    { field: 'selfcol', width: 100, title: '自定义列' },
    { field: 'size', width: 100, title: '大小' },
    { field: 'createTime', width: 100, title: '日期' },
    { field: 'state', width: 100, title: '状态' },
    { field: 'action', width: 100, title: '操作' }
];
let fileInfos = [
    {
        id: 'test00',
        name: '',
        size: 18023,
        createTime: '2011-03-04',
        uploadType: '英语证书',
        extend: {
            metadataId: 'metadataId-001' // 附件元数据Id
        },
        originalData: {
            attachInfo: {
                size: 2220,
                fileCreateTime: '2020-01-12 10:34:30'
            }
        }
    },
    {
        id: 'test01',
        name: '附件名称超长时候如何处理的验证.pdf',
        size: 98023,
        createTime: '2011-03-05',
        uploadType: '英语证书',
        extend: {
            metadataId: 'metadataId-003' // 附件元数据Id
        },

        originalData: {
            attachInfo: {
                size: 2220,
                fileCreateTime: '2020-01-12 10:34:30'
            }
        }
    },
    {
        id: 'test02',
        name: '测试.txt',
        uploadType: '学历证书',
        size: 8023,
        createTime: '2011-03-08 8:12:12',
        extend: {
            metadataId: 'metadataId-002' // 附件元数据Id
        },

        originalData: {
            attachInfo: {
                size: 2220,
                fileCreateTime: '2020-01-12 10:34:30'
            }
        }
    },
    {
        id: 'test03-1',
        name: '测试-03.jpg',
        size: 8023,
        createTime: '2011-03-11 8:12:12',
        uploadType: '学历证书',
        fileCreateTime: '',
        fileModifyTime: '',
        extend: {
            metadataId: 'metadataId-00401'
        },
        originalData: {
            attachInfo: {
                size: 2220,
                fileCreateTime: '2020-01-12 10:34:30'
            }
        }
    },
    {
        id: 'test03-2',
        createTime: '2011-03-04 8:12:12',
        uploadType: '成绩单证明',
        name: '测试-05.jpg',
        extend: {
            metadataId: 'metadataId-00403'
        },

        originalData: {
            attachInfo: {
                size: 2220,
                fileCreateTime: '2020-01-12 10:34:30'
            }
        }
    },
    {
        id: 'test03-3',
        name: '测试-04.jpg',
        uploadType: '成绩单证明',
        createTime: '2011-03-04 8:12:12',
        extend: {
            metadataId: 'metadataId-00402'
        },

        originalData: {
            attachInfo: {
                size: 2220,
                fileCreateTime: '2020-01-12 10:34:30'
            }
        }
    },
    {
        id: 'test05',
        name: '测试.doc',
        createTime: '2011-03-04 8:12:12',
        uploadType: '成绩单证明',
        extend: {
            metadataId: 'metadataId-005'
        },

        originalData: {
            attachInfo: {
                size: 2220,
                fileCreateTime: '2020-01-12 10:34:30'
            }
        }
    },
    {
        id: 'test051',
        name: '测试.docx',
        uploadType: '其他类型',
        createTime: '2011-03-04 8:12:12',
        extend: {
            metadataId: 'metadataId-0051'
        },

        originalData: {
            attachInfo: {
                size: 2220,
                fileCreateTime: '2020-01-12 10:34:30'
            }
        }
    },
    {
        id: 'test06',
        name: '测试.ppt',
        uploadType: '其他类型',
        createTime: '2011-03-04 8:12:12',
        extend: {
            metadataId: 'metadataId-006'
        },

        originalData: {
            attachInfo: {
                size: 2220,
                fileCreateTime: '2020-01-12 10:34:30'
            }
        }
    },
    {
        id: 'test07',
        name: '测试.xls',
        uploadType: '其他类型',
        createTime: '2011-03-04 8:12:12',
        extend: {
            metadataId: 'metadataId-007'
        },

        originalData: {
            attachInfo: {
                size: 2220,
                fileCreateTime: '2020-01-12 10:34:30'
            }
        }
    },
    {
        id: 'test08',
        name: '测试.zip',
        uploadType: '其他类型',
        createTime: '2011-03-04 8:12:12',
        extend: {
            metadataId: 'metadataId-008'
        },

        originalData: {
            attachInfo: {
                size: 2220,
                fileCreateTime: '2020-01-12 10:34:30'
            }
        }
    }
];
const changeStateuApPreviewReadonly = () => {
    console.log('uApPreviewReadonly');
    uApPreviewReadonly.value = !uApPreviewReadonly.value;
};
const changeStateuApPreviewVisible = () => {
    console.log('uApPreviewVisible');
    uApPreviewVisible.value = !uApPreviewVisible.value;
};

const changeStateuApUploadDisabled = () => {
    console.log('uApUploadDisabled');
    uApUploadDisabled.value = !uApUploadDisabled.value;
};
const changeStatecmpDisabled = () => {
    console.log('cmpDisabled');
    cmpDisabled.value = !cmpDisabled.value;
};
const changeStateuApUploadVisible = () => {
    console.log('uApUploadVisible');
    uApUploadVisible.value = !uApUploadVisible.value;
};

const changeStatecmpnoDownload = () => {
    console.log('cmpnoDownload');
    cmpnoDownload.value = !cmpnoDownload.value;
};

const changeStatecmpnoPreview = () => {
    console.log('cmpnoPreview');
    cmpnoPreview.value = !cmpnoPreview.value;
};

const changeStatepreviewEnableMulti = () => {
    console.log('previewEnableMulti');
    previewEnableMulti.value = !previewEnableMulti.value;
};

const changeStateuploadEnableMulti = () => {
    console.log('uploadEnableMulti');
    uploadEnableMulti.value = !uploadEnableMulti.value;
};


const changeStatecustomInfo = () => {
    console.log('customInfo');
    if(customInfo.value){
        customInfo.value="";
    }else{
        customInfo.value='<b class="text-info">此处是自定义信息</b>'
    }
};

// provide('key', {
//     getData(){

//     }
// })
</script>

<template>
    <div class="farris-form form-inline farris-form-inline">
        <div class="f-utils-flex-row-wrap">
            <div class="col-3">
                <div class="farris-group-wrap">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label" for="class-input-checkbox01" style="width: 210px">
                            <span class="farris-label-text">预览只读 (previewReadonly)</span>
                        </label>
                        <div class="farris-input-wrap">
                            <div class="custom-control custom-checkbox">
                                <input
                                    class="custom-control-input"
                                    id="class2-input-uApPreviewReadonly"
                                    type="checkbox"
                                    :checked="uApPreviewReadonly"
                                />
                                <label
                                    class="custom-control-label"
                                    for="class2-input-uApPreviewReadonly"
                                    @click="changeStateuApPreviewReadonly()"
                                ></label>
                            </div>
                            <div class="farris-feedback valid-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="farris-group-wrap">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label" for="class-input-checkbox01" style="width: 210px">
                            <span class="farris-label-text">预览可见(previewVisible)</span>
                        </label>
                        <div class="farris-input-wrap">
                            <div class="custom-control custom-checkbox">
                                <input
                                    class="custom-control-input"
                                    id="class2-input-uApPreviewVisible"
                                    type="checkbox"
                                    :checked="uApPreviewVisible"
                                    
                                />
                                <label
                                    class="custom-control-label"
                                    for="class2-input-uApPreviewVisible"
                                    @click="changeStateuApPreviewVisible()"
                                ></label>
                            </div>
                            <div class="farris-feedback valid-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="farris-group-wrap">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label" for="class-input-checkbox01" style="width: 210px">
                            <span class="farris-label-text">上传禁用(uploadDisabled){{ uApUploadDisabled }}</span>
                        </label>
                        <div class="farris-input-wrap">
                            <div class="custom-control custom-checkbox">
                                <input
                                    class="custom-control-input"
                                    id="class2-input-uApUploadDisabled"
                                    type="checkbox"
                                    :checked="uApUploadDisabled"
                                />
                                <label
                                    class="custom-control-label"
                                    for="class2-input-uApUploadDisabled"
                                    @click="changeStateuApUploadDisabled()"
                                ></label>
                            </div>
                            <div class="farris-feedback valid-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="farris-group-wrap">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label" for="class-input-checkbox01" style="width: 210px">
                            <span class="farris-label-text">上传可见(uploadVisible){{ uApUploadVisible }}</span>
                        </label>
                        <div class="farris-input-wrap">
                            <div class="custom-control custom-checkbox">
                                <input
                                    class="custom-control-input"
                                    id="class2-input-uApUploadVisible"
                                    type="checkbox"
                                    :checked="uApUploadVisible"
                                />
                                <label
                                    class="custom-control-label"
                                    for="class2-input-uApUploadVisible"
                                    @click="changeStateuApUploadVisible()"
                                ></label>
                            </div>
                            <div class="farris-feedback valid-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="farris-group-wrap">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label" for="class-input-checkbox01" style="width: 210px">
                            <span class="farris-label-text">预览文件支持批量(previewEnableMulti){{ previewEnableMulti }}</span>
                        </label>
                        <div class="farris-input-wrap">
                            <div class="custom-control custom-checkbox">
                                <input
                                    class="custom-control-input"
                                    id="class2-input-uApUploadVisible"
                                    type="checkbox"
                                    :checked="previewEnableMulti"
                                />
                                <label
                                    class="custom-control-label"
                                    for="class2-input-uApUploadVisible"
                                    @click="changeStatepreviewEnableMulti()"
                                ></label>
                            </div>
                            <div class="farris-feedback valid-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="farris-group-wrap">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label" for="class-input-checkbox01" style="width: 210px">
                            <span class="farris-label-text">上传文件支持批量(uploadEnableMulti){{ uploadEnableMulti }}</span>
                        </label>
                        <div class="farris-input-wrap">
                            <div class="custom-control custom-checkbox">
                                <input
                                    class="custom-control-input"
                                    id="class2-input-uApUploadVisible"
                                    type="checkbox"
                                    :checked="uploadEnableMulti"
                                />
                                <label
                                    class="custom-control-label"
                                    for="class2-input-uApUploadVisible"
                                    @click="changeStateuploadEnableMulti()"
                                ></label>
                            </div>
                            <div class="farris-feedback valid-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="col-3">
                <div class="farris-group-wrap">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label" for="class-input-checkbox01" style="width: 210px">
                            <span class="farris-label-text" style="color: red">禁用(disabled){{ cmpDisabled }}</span>
                        </label>
                        <div class="farris-input-wrap">
                            <div class="custom-control custom-checkbox">
                                <input class="custom-control-input" id="class2-input-cmpDisabled" type="checkbox" :checked="cmpDisabled" />
                                <label
                                    class="custom-control-label"
                                    for="class2-input-cmpDisabled"
                                    @click="changeStatecmpDisabled()"
                                ></label>
                            </div>
                            <div class="farris-feedback valid-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="farris-group-wrap">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label" for="class-input-checkbox01" style="width: 210px">
                            <span class="farris-label-text" style="color: red">禁止下载(noDownload){{ cmpnoDownload }}</span>
                        </label>
                        <div class="farris-input-wrap">
                            <div class="custom-control custom-checkbox">
                                <input
                                    class="custom-control-input"
                                    id="class2-input-cmpnoDownload"
                                    type="checkbox"
                                    :checked="cmpnoDownload"
                                />
                                <label
                                    class="custom-control-label"
                                    for="class2-input-cmpnoDownload"
                                    @click="changeStatecmpnoDownload()"
                                ></label>
                            </div>
                            <div class="farris-feedback valid-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="farris-group-wrap">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label" for="class-input-checkbox01" style="width: 210px">
                            <span class="farris-label-text" style="color: red">禁止预览(noPreview){{ cmpnoPreview }}</span>
                        </label>
                        <div class="farris-input-wrap">
                            <div class="custom-control custom-checkbox">
                                <input
                                    class="custom-control-input"
                                    id="class2-input-cmpnoPreview"
                                    type="checkbox"
                                    :checked="cmpnoPreview"
                                />
                                <label
                                    class="custom-control-label"
                                    for="class2-input-cmpnoPreview"
                                    @click="changeStatecmpnoPreview()"
                                ></label>
                            </div>
                            <div class="farris-feedback valid-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="farris-group-wrap">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label" for="class-input-checkbox01" style="width: 210px">
                            <span class="farris-label-text">是否显示自定义信息(customInfo)</span>
                        </label>
                        <div class="farris-input-wrap">
                            <div class="custom-control custom-checkbox">
                                <input
                                    class="custom-control-input"
                                    id="class2-input-uApUploadVisible"
                                    type="checkbox"
                                    :checked="!!customInfo"
                                />
                                <label
                                    class="custom-control-label"
                                    for="class2-input-uApUploadVisible"
                                    @click="changeStatecustomInfo()"
                                ></label>
                            </div>
                        </div>                        
                        <p class="m-0" v-html="customInfo"></p>
                    </div>
                </div>
            </div>
            <!-- <div class="col-3">
                <div class="farris-group-wrap">
                    <button class="btn btn-primary" @click="clearData()">{{ fileInfos.length ? '清空数据' : '加载数据' }}</button>
                </div>
            </div>
            <div class="col-3">
                <div class="farris-group-wrap">
                    <button class="btn btn-primary" @click="previewInstance.previewUpdateRefresh()">通过方法重置多选</button>
                </div>
            </div> -->
        </div>
    </div>
    <div>
        <f-uploader
            :uploadOptions="options"
            :fileInfos="fileInfos"
            :previewReadonly="uApPreviewReadonly"
            :previewVisible="uApPreviewVisible"
            :uploadDisabled="uApUploadDisabled"
            :disabled="cmpDisabled"
            :noDownload="cmpnoDownload"
            :noPreview="cmpnoPreview"
            :editfile="true"
            :customInfo="customInfo"
            :previewEnableMulti="previewEnableMulti"
            :uploadEnableMulti="uploadEnableMulti"
        ></f-uploader>
        <!--
  
            :uploadVisible="uApUploadVisible"
            :orderField="'sortPreviewData'"
            :disabled="cmpDisabled"
            :noDownload="cmpnoDownload"
            :noPreview="cmpnoPreview"
            :editfile="true"
            :previewShowComments="true"
-->
        <!-- <f-file-upload-and-preview [uploadOptions]="options" [fileInfos]="fileInfosWithOrder" 
  [previewReadonly]="uApPreviewReadonly" 
  [previewVisible]="uApPreviewVisible"
  [uploadDisabled]="uApUploadDisabled" 
  [uploadVisible]="uApUploadVisible"
  [previewColumns]="uploadAndPreviewCols"
  (afterOrdered)="onFileOrdered($event)"
  [enableOrder]="true"
  [orderField]="'sortPreviewData'"
  [disabled]="cmpDisabled"
  [noDownload]="cmpnoDownload"
  [noPreview]="cmpnoPreview"
  [editfile]="true"
  [docMode]="'admin2'"
  [previewDateFormat] = "'yyyy年MM月dd日'"
  [previewShowComments]="true"
  [extendServerConfig]="{'rootId':'default-root','formId':'formId'}" fFilePreviewAdaptUnifile
  [customInfo]="'<b>hello world! I\'m coming...</b>'" >
  </f-file-upload-and-preview>  -->

        <!-- <f-file-upload-and-preview
            [uploadOptions]="options"
            [fileInfos]="fileInfos"
            [previewReadonly]="uApPreviewReadonly"
            [previewVisible]="uApPreviewVisible"
            [uploadDisabled]="uApUploadDisabled"
            [uploadVisible]="uApUploadVisible"
            [previewColumns]="uploadAndPreviewCols"
            (afterOrdered)="onFileOrdered($event)"
            [orderField]="'sortPreviewData'"
            [disabled]="cmpDisabled"
            [noDownload]="cmpnoDownload"
            [noPreview]="cmpnoPreview"
            [editfile]="true"
            [previewShowComments]="true"
            [customInfo]="'<b>hello world! I\'m coming...</b>'"
        >
        </f-file-upload-and-preview> -->
    </div>
</template>
<style></style>
